<template>
  <div style=" display: flex; flex-direction: column;">
    <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="queryForm.phone" placeholder="请输入手机号" clearable />
      </el-form-item>

      <el-form-item label="性别" style="width: 130px;">
        <el-select v-model="queryForm.sex" placeholder="请选择" clearable>
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOrUpdate(true,null)">新增员工</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="name" label="姓名" width="150" align="center" />
      <el-table-column prop="phone" label="手机号" width="150" align="center" />
      <el-table-column prop="sex" label="性别" width="80" align="center">
        <template v-slot="{ row }">
          <span v-if="row.sex === 1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="idNumber" label="身份证号" width="200" align="center" />、
      <el-table-column prop="monthlySalary" label="月薪" width="100" align="center" />、
      <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
      <el-table-column prop="updateTime" label="最后操作时间" width="120" align="center" />
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="{row}">
          <el-popconfirm :icon="InfoFilled" @confirm="confirmEvent(row.id)" @cancel="cancelEvent" title="你确定要删除该账号吗?">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" size="small" @click="addOrUpdate(false,row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex; margin-top: 20px; margin-left: 240px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8, 10]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>  
    <EmployeeForm :onSubmit="onSubmit" ref="employeeForm"></EmployeeForm>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { reactive } from 'vue'

const queryForm = reactive({
  name: '',
  sex: null,
  phone: '',
})

//分页
const total = ref(Number)
const currentPage = ref(1)
const pageSize = ref(6)
const small = ref(true)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  onSubmit();
}

const tableData = ref([])
import { getList } from '@/apis/employee.js'
async function getEmployeeList() {
  const res = await getList(currentPage.value, pageSize.value)
  console.log(res)
  tableData.value = res.data.data.records
  console.log(res.data.data.total)
  total.value = res.data.data.total
}
getEmployeeList()

//条件查询
const onSubmit = async () => {
  console.log('submit!')
  const res = await getList(currentPage.value, pageSize.value,queryForm.name,queryForm.phone,queryForm.sex)
  console.log(res.data.data.records)
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}

//删除
import { InfoFilled } from '@element-plus/icons-vue'
import {deletemployee} from '@/apis/employee.js'
const confirmEvent = async (id: string) => {
  console.log('删除!' + id)
  //删除该员工 
  await deletemployee(id)
  //并刷新表格
  onSubmit();
}
const cancelEvent = () => {
  console.log('取消!')
}

import EmployeeForm from './EmployeeForm.vue'


const employeeForm=ref(null)
//添加员工
function addEmployee() {
   employeeForm.value.changeDialogVisible(true)
   console.log('添加员工!')
}
//修改员工信息
function updateEmployee(row: any) {
  console.log('修改员工信息!')
  employeeForm.value.changeDialogVisible(false)
  employeeForm.value.editFormData(row)
}
function addOrUpdate(isadd:boolean,row:any){
  if(isadd){
    addEmployee()
  }else{
    updateEmployee(row)
  }
}

</script>